import 'package:flutter/material.dart';
import 'package:flutter_demo/conf/m3.dart';
import 'package:flutter_demo/pages/page_with_title.dart';
import 'package:flutter_demo/widgets/app_widgets.dart';

class WrapPage extends PageWithTitle {
  const WrapPage() : super("链式布局(Wrap)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("与Flex类似，但Wrap支持越界换行，可以作为流式布局使用，因其本身具备类似"
          "Android约束布局的chain效果，所以这里干脆其名为链式布局"),
      AppSpacer.large,
      _Example(),
      AppSpacer.mini,
      UlItem("Wrap"),
      LabelText("- direction，子项排布方向（以横向排布为例）"),
      LabelText("- alignment，子项在主轴上的对齐效果，通过这个属性可以实现chain"),
      LabelText("  - start，对齐开始位置"),
      LabelText("  - center，居中对齐"),
      LabelText("  - end，对齐结束位置"),
      LabelText("  - spaceBetween，间隔（0，1，，，1，0）"),
      LabelText("  - spaceAround，间隔环绕（0.5，1，，，1，0.5）"),
      LabelText("  - spaceEvenly，间隔均分（1，，，1）"),
      LabelText("- spaceing，子项之间的间隔"),
      LabelText("- runAlignment，运行对齐，默认Wrap组件是自适应高度的，当其为固定高度时，"
          "设置子项以行为单位在交叉轴上的对齐效果"),
      LabelText("- runSpacing，行间距"),
      LabelText("- crossAxisAlignment，处于同一行的子项在这一行中的对齐效果"),
    ];
  }
}

class _Example extends StatelessWidget {
  const _Example();

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 400,
      decoration: BoxDecoration(
        color: Theme.of(context).colorScheme.surfaceContainer,
        borderRadius: M3.connerRadiusMedium,
      ),
      child: Wrap(
        direction: Axis.horizontal,
        alignment: WrapAlignment.spaceBetween,
        spacing: 0,
        runAlignment: WrapAlignment.spaceEvenly,
        runSpacing: 10,
        crossAxisAlignment: WrapCrossAlignment.end,
        children: List.generate(
          20,
          (index) => Container(
            width: 40,
            height: 40 + (index * 2),
            color: Theme.of(context)
                .colorScheme
                .primary
                .withAlpha((255 / 20 * (index + 1)).toInt()),
          ),
        ),
      ),
    );
  }
}
